{extend name="layout/plugin_layout" /}
﻿
{block name="title"}{$plugin.title} - {$app.title}{/block}
{block name="head"}
<script src="{:plugin_static($plugin.alias)}/figlet.js-1.5.2/lib/figlet.js"></script>
<style>
    pre {
        height: 1rem;
    }
</style>
{/block}
{block name="main"}
<div class="container mx-auto" id="app">
    <div class="card lg:card-side bordered shadow-lg">
        <div class="card-body overflow-auto">
            <div class="main">
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">字符串</span>
                    </label>
                    <textarea v-model="set.input" class="textarea textarea-bordered  h-64"></textarea>
                </div>
                <div class="flex flex-col lg:flex-row">
                    <div class="form-control flex-1 px-4">
                        <label class="label">
                            <span class="label-text">类型</span>
                        </label>
                        <select class="select select-bordered select-primary w-full" v-model="set.font">
                            <option value="all">全部</option>
                            <option v-for="v in fonts">{{v}}</option>
                        </select>
                    </div>
                    <div class="form-control flex-1 px-4">
                        <label class="label">
                            <span class="label-text">水平布局</span>
                        </label>
                        <select class="select select-bordered select-primary w-full"
                                v-model="set.horizontalLayout">
                            <option value="default">默认</option>
                            <option value="full">full</option>
                            <option value="fitted">fitted</option>
                            <option value="controlled smushing">controlled smushing</option>
                            <option value="universal smushing">universal smushing</option>
                        </select>
                    </div>
                    <div class="form-control flex-1 px-4">
                        <label class="label">
                            <span class="label-text">宽度</span>
                        </label>
                        <select class="select select-bordered select-primary w-full" v-model="set.width">
                            <option value="50">50</option>
                            <option value="60">60</option>
                            <option value="70">70</option>
                            <option value="80">80</option>
                            <option value="90">90</option>
                            <option value="100">100</option>
                            <option value="undefined">full</option>
                        </select>
                    </div>
                </div>
                <div class="card-actions mt-4">
                    <button class="btn btn-primary flex-1" @click="generate">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
                             stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                  d="M17 13l-5 5m0 0l-5-5m5 5V6"/>
                        </svg>
                        生成
                    </button>
                    <button class="btn btn-primary flex-1" @click="reset">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd"
                                  d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
                                  clip-rule="evenodd"/>
                        </svg>
                        清空
                    </button>
                </div>
                <div class="mockup-code">
                    <pre v-for="(line,index) in set.output.split('\n')"><code>{{line}}</code></pre>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line Oblique', 'Acrobatic', 'Alligator', 'Alligator2', 'Alpha', 'Alphabet', 'AMC 3 Line', 'AMC 3 Liv1', 'AMC AAA01', 'AMC Neko', 'AMC Razor', 'AMC Razor2', 'AMC Slash', 'AMC Slider', 'AMC Thin', 'AMC Tubes', 'AMC Untitled', 'ANSI Regular', 'ANSI Shadow', 'Arrows', 'ASCII New Roman', 'Avatar', 'B1FF', 'Banner', 'Banner3', 'Banner3-D', 'Banner4', 'Barbwire', 'Basic', 'Bear', 'Bell', 'Benjamin', 'Big Chief', 'Big Money-ne', 'Big Money-nw', 'Big Money-se', 'Big Money-sw', 'Big', 'Bigfig', 'Binary', 'Block', 'Blocks', 'Bloody', 'Bolger', 'Braced', 'Bright', 'Broadway KB', 'Broadway', 'Bubble', 'Bulbhead', 'Caligraphy', 'Caligraphy2', 'Calvin S', 'Cards', 'Catwalk', 'Chiseled', 'Chunky', 'Coinstak', 'Cola', 'Colossal', 'Computer', 'Contessa', 'Contrast', 'Cosmike', 'Crawford', 'Crawford2', 'Crazy', 'Cricket', 'Cursive', 'Cyberlarge', 'Cybermedium', 'Cybersmall', 'Cygnet', 'DANC4', 'Dancing Font', 'Decimal', 'Def Leppard', 'Delta Corps Priest 1', 'Diamond', 'Diet Cola', 'Digital', 'Doh', 'Doom', 'DOS Rebel', 'Dot Matrix', 'Double Shorts', 'Double', 'Dr Pepper', 'DWhistled', 'Efti Chess', 'Efti Font', 'Efti Italic', 'Efti Piti', 'Efti Robot', 'Efti Wall', 'Efti Water', 'Electronic', 'Elite', 'Epic', 'Fender', 'Filter', 'Fire Font-k', 'Fire Font-s', 'Flipped', 'Flower Power', 'Four Tops', 'Fraktur', 'Fun Face', 'Fun Faces', 'Fuzzy', 'Georgi16', 'Georgia11', 'Ghost', 'Ghoulish', 'Glenyn', 'Goofy', 'Gothic', 'Graceful', 'Gradient', 'Graffiti', 'Greek', 'Heart Left', 'Heart Right', 'Henry 3D', 'Hex', 'Hieroglyphs', 'Hollywood', 'Horizontal Left', 'Horizontal Right', 'ICL-1900', 'Impossible', 'Invita', 'Isometric1', 'Isometric2', 'Isometric3', 'Isometric4', 'Italic', 'Ivrit', 'Jacky', 'Jazmine', 'Jerusalem', 'JS Block Letters', 'JS Bracket Letters', 'JS Capital Curves', 'JS Cursive', 'JS Stick Letters', 'Katakana', 'Kban', 'Keyboard', 'Knob', 'Konto Slant', 'Konto', 'Larry 3D 2', 'Larry 3D', 'LCD', 'Lean', 'Letters', 'Lil Devil', 'Line Blocks', 'Linux', 'Lockergnome', 'Madrid', 'Marquee', 'Maxfour', 'Merlin1', 'Merlin2', 'Mike', 'Mini', 'Mirror', 'Mnemonic', 'Modular', 'Morse', 'Morse2', 'Moscow', 'Mshebrew210', 'Muzzle', 'Nancyj', 'Nancyj-Fancy', 'Nancyj-Improved', 'Nancyj-Underlined', 'Nipples', 'NScript', 'NT Greek', 'NV Script', 'O8', 'Octal', 'Ogre', 'Old Banner', 'OS2', 'Pagga', 'Patorjk\'s Cheese', 'Patorjk-HeX', 'Pawp', 'Peaks Slant', 'Peaks', 'Pebbles', 'Pepper', 'Poison', 'Puffy', 'Puzzle', 'Pyramid', 'Rammstein', 'Rectangles', 'Red Phoenix', 'Relief', 'Relief2', 'Reverse', 'Roman', 'Rot13', 'Rotated', 'Rounded', 'Rowan Cap', 'Rozzo', 'Runic', 'Runyc', 'S Blood', 'Santa Clara', 'Script', 'Serifcap', 'Shadow', 'Shimrod', 'Short', 'SL Script', 'Slant Relief', 'Slant', 'Slide', 'Small Caps', 'Small Isometric1', 'Small Keyboard', 'Small Poison', 'Small Script', 'Small Shadow', 'Small Slant', 'Small Tengwar', 'Small', 'Soft', 'Speed', 'Spliff', 'Stacey', 'Stampate', 'Stampatello', 'Standard', 'Star Strips', 'Star Wars', 'Stellar', 'Stforek', 'Stick Letters', 'Stop', 'Straight', 'Stronger Than All', 'Sub-Zero', 'Swamp Land', 'Swan', 'Sweet', 'Tanja', 'Tengwar', 'Term', 'Test1', 'The Edge', 'Thick', 'Thin', 'THIS', 'Thorned', 'Three Point', 'Ticks Slant', 'Ticks', 'Tiles', 'Tinker-Toy', 'Tombstone', 'Train', 'Trek', 'Tsalagi', 'Tubular', 'Twisted', 'Two Point', 'Univers', 'USA Flag', 'Varsity', 'Wavy', 'Weird', 'Wet Letter', 'Whimsy', 'Wow',]
    figlet.defaults({fontPath: '{:plugin_static($plugin.alias)}/figlet.js-1.5.2/fonts'});
    var vm = new Vue({
        el: '#app',
        data: {
            set: {
                input: 'AOAOSTAR',
                output: '',
                font: '3D Diagonal',
                horizontalLayout: 'default',
                width: undefined,
            },
            fonts
        },
        watch: {
            'set.input'() {
                this.generate()
            },
            'set.font'(newVal) {
                if (newVal !== 'all') {
                    figlet.loadFont(newVal, () => {
                    });
                }
            }
        },
        created() {
            this.generate()
        },
        methods: {
            generate() {
                let that = this
                try {
                    let tasks = []
                    if (this.set.font === 'all') {
                        tasks = this.fonts
                    } else {
                        tasks.push(this.set.font)
                    }
                    that.set.output = '';
                    for (const k in tasks) {
                        figlet.text(this.set.input, {
                            font: tasks[k],
                            horizontalLayout: this.set.horizontalLayout,
                            verticalLayout: 'default',
                            width: this.set.width,
                            whitespaceBreak: true
                        }, function (err, text) {
                            if (err) {
                                throw err
                            }
                            that.set.output += '\n' + text + '\n';
                        });
                    }

                } catch (e) {
                    $message.error(e.message)
                }
            },
            reset() {
                this.set.input = ''
                this.set.output = ''
            },
        },
    })

</script>

{/block}